<template>
  <view>
    <view class="box">
      <text class="title">取快递</text> <br>
      <text class="online1">快递大小</text>
      <!-- 大中小件 -->
      <view class="box-items">
        <view v-for="(item, index) in info" :key="index" class="box-item" @click="tab(index)"
          :class="{active: tabIndex === index}"><text>{{item.name}}</text></view>
      </view>
      <!-- 表单区 -->
      <form action="" class="info">
        <view class="address">
          <view class="buJu"> <text>收件地址：</text><input v-model="msg.address" type="text" placeholder="XXX-XXX-XX" />
          </view>
          <view class="buJu"> <text>快递商家：</text><input v-model="msg.ShangJ" type="text" placeholder="请选择快递点" /></view>
          <view class="buJu"> <text>取件信息：</text></view>

          <textarea cols="30" rows="10" placeholder="请输入取件码" v-model="msg.qjm"
            style="border: 1rpx solid #dadada; border-radius: 20rpx; padding: 16rpx; margin: 20rpx auto; width: 90%;"></textarea>

          <view class="buJu"> <text>备注信息：</text><input v-model="msg.remark" type="text" placeholder="此信息都可见" /></view>

          <view class="buJu" v-if="!flag"><text>更多选择：</text><text style="color: #80a2dc;" @click="show">显示</text></view>
          <view class="buJu" v-if="flag"><text>更多选择：</text><text style="color: #80a2dc;" @click="show">隐藏</text></view>
          <!-- 隐藏区 -->
          <view v-if="flag" style="width: 90%; margin: 0 auto; font-size: 24rpx;">
            <view class="buJu"> <text>期望送达：</text><input v-model="msg.expectTime" type="text" placeholder="不限制" />
            </view>
            <view class="buJu"> <text>性别限制：</text><input v-model="msg.expectGender" type="text" placeholder="不限制" />
            </view>
            <view class="buJu"> <text>快递数量：</text><input v-model="msg.number" type="text" placeholder="1个" /></view>
          </view>
          <!-- 提示 -->
          <text
            style="display: flex; justify-content: center; color: #b5b3b1; font-size: 24rpx; margin-top: 20rpx;">信息仅接单的同学可见，安全放心！</text>
        </view>

        <view style="margin: 20rpx; text-align: center;">
          <text style="font-size: 32rpx; display: block; margin-bottom: 20rpx;">需支付</text>
          <text
            style="font-size: 40rpx; color: red;">{{info[tabIndex].money * msg.number? info[tabIndex].money * msg.number : 0}}元</text>
        </view>

        <button class="pub" @click="sub">立即发布</button>
        <text class="footer">用户条款&隐私策略</text>
      </form>
    </view>
  </view>
</template>

<script>
  import {
    AddOrder
  } from '../../request/api.js'
  export default {
    data() {
      return {
        flag: false,
        info: [{
          name: '小件',
          money: 3
        }, {
          name: '中件',
          money: 5
        }, {
          name: '大件',
          money: 8
        }],
        tabIndex: 0,
        msg: {
          ShangJ: '',
          qjm: '',
          address: '',
          remark: '',
          expectTime: '',
          expectGender: '',
          number: '',
          phone: uni.getStorageSync('userInfo')?.phoneNum || '', // 添加了默认值处理，避免获取不到值报错
          user_pic: uni.getStorageSync('userImg') || '' // 添加了默认值处理，避免获取不到值报错
        }
      }
    },
    computed: {
      // 通过计算属性动态计算金额，随依赖数据变化而更新
      totalMoney() {
        return this.info[this.tabIndex].money * this.msg.number;
      },
      // 动态获取快递大小，随tabIndex变化更新
      size() {
        return this.info[this.tabIndex].name;
      }
    },
    methods: {
      // 控制显示隐藏
      show() {
        this.flag = !this.flag
      },
      // 切换
      tab(n) {
        this.tabIndex = n
      },
      // 提交订单
      sub() {
        const orderData = {
          type: '快递代取',
          money: this.totalMoney,
          address: this.msg.address,
          state: 0,
          orderInfo: JSON.stringify(this.msg),
          user_id: uni.getStorageSync('userInfo')?.id || ''
        };
        // console.log(orderData);
        AddOrder(orderData).then((res) => {
          // console.log(res);
          this.msg = ''
          uni.showToast({
            icon: 'success',
            title: '提交成功'
          })
        }).catch((err) => {
          console.log(err);
        });
        setTimeout(() => {
          uni.switchTab({
            url: '/pages/index/index'
          })
        },800)
      }
    }
  }
</script>

<style>
  /* 此处样式部分保持不变，和你原来提供的一致 */
  page {
    background-color: #e6e6e6;
  }

  /* 最大容器 */
  .box {
    width: 80%;
    background-color: #ffffff;
    margin: 32rpx auto;
    padding: 40rpx;
    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);
    border-radius: 32rpx;
  }

  .title {
    color: #81b2e6;
    display: flex;
    justify-content: center;
    /* margin: 0 auto; */
  }

  /* 快递大小 */
  .online1 {
    display: block;
    font-weight: 550;
    text-align: left;
  }

  /* 大中小件 */
  .box-items {
    display: flex;
    justify-content: space-between;
    text-align: center;
    margin: 20rpx auto;
  }

  /* 每一项 */
  .box-item {
    width: 150rpx;
    padding: 14rpx;
    border-radius: 16rpx;
    border: 1rpx solid black;
    color: black;
  }

  /* 选中样式 */
  .active {
    color: #81b2e6;
    border: 1rpx solid #81b2e6;
  }

  .address {
    width: 100%;
    margin-top: 30rpx;
    font-weight: 550;
  }

  .address input {
    text-align: right;
  }

  .address.buJu {
    height: 80rpx;
    display: flex;
    justify-content: space-between;
    border-bottom: 1rpx solid #dadada;
    margin-top: 20rpx;
  }

  .more {
    display: flex;
    justify-content: space-between;
  }

  /* 发布按钮 */
  .pub {
    width: 90%;
    border-radius: 100rpx;
    background: #0f67d0;
    color: #fff;
    margin-top: 40rpx;
  }

  .footer {
    font-size: 28rpx;
    color: #76a5e1;
    display: flex;
    justify-content: center;
    margin-top: 20rpx;
  }
</style>